<template>
    <view class="container">
        <!-- 主要内容区域 -->
        <view class="content">
            <!-- 证件及个人信息列表 -->
            <view class="certificate-info-list">
                <uni-list>
                    <uni-list-item 
                        v-for="item in certificateInfoItems" 
                        :key="item.key" 
                        :title="item.label" 
                        :note="item.value"
                        :showArrow="false"
                        :clickable="false"
                        class="certificate-item"
                    />
                </uni-list>
            </view>

        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue'

// 证件及个人信息数据
const certificateInfoItems = ref([
    {
        key: 'certificateType',
        label: '证件类型',
        value: '身份证'
    },
    {
        key: 'certificateNumber',
        label: '证件号码',
        value: '3****************X'
    },
    {
        key: 'birthDate',
        label: '出生日期',
        value: '1992-03-15'
    },
    {
        key: 'age',
        label: '年龄',
        value: '31 岁'
    },
    {
        key: 'gender',
        label: '性别',
        value: '男'
    },
    {
        key: 'mobileNumber',
        label: '手机号',
        value: '138****8888'
    },
    {
        key: 'certificateAddress',
        label: '证件地址',
        value: '浙江省杭州市西湖区文三路123号'
    }
])

</script>

<style>
.container {
    height: 100vh;
    background-color: #f5f5f5;
    padding: 0 30rpx;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.content {
    padding: 0 20rpx;
    padding-bottom: 40rpx;
    margin-top: 30rpx;
    flex: 1;
    overflow-y: auto;
}

.certificate-info-list {
    background: #fff;
    border-radius: 16rpx;
    margin-bottom: 20rpx;
    overflow: hidden;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.certificate-item {
    border-bottom: 1rpx solid #f0f0f0;
}

.certificate-item:last-child {
    border-bottom: none;
}

.update-time-section {
    background: #f8f9fa;
    border-radius: 12rpx;
    overflow: hidden;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.update-time-item {
    border-bottom: none;
}
</style> 